<template>
  <view class="recruit-basic-info">
    <view class="recruit-basic-info__header">
      <image class="recruit-basic-info__logo" :src="recruitInfo.logo || 'https://placekitten.com/200/200'" mode="aspectFill"></image>
      <view class="recruit-basic-info__info">
        <view class="recruit-basic-info__name">{{ recruitInfo.title }}</view>
        <view class="recruit-basic-info__org">{{ recruitInfo.organization }}</view>
        <view class="recruit-basic-info__tags">
          <text class="recruit-basic-info__tag recruit-basic-info__tag--type">{{ getTypeName(recruitInfo.type) }}</text>
          <text v-if="recruitInfo.isHot" class="recruit-basic-info__tag recruit-basic-info__tag--hot">热门</text>
          <text v-if="recruitInfo.isRecommended" class="recruit-basic-info__tag recruit-basic-info__tag--recommend">推荐</text>
        </view>
      </view>
    </view>
    
    <view class="recruit-basic-info__data">
      <view class="recruit-basic-info__data-item">
        <text class="recruit-basic-info__data-label">招募人数</text>
        <text class="recruit-basic-info__data-value">{{ recruitInfo.positions }}人</text>
      </view>
      <view class="recruit-basic-info__data-item">
        <text class="recruit-basic-info__data-label">已申请</text>
        <text class="recruit-basic-info__data-value">{{ recruitInfo.applied }}人</text>
      </view>
      <view class="recruit-basic-info__data-item">
        <text class="recruit-basic-info__data-label">截止日期</text>
        <text class="recruit-basic-info__data-value">{{ formatDate(recruitInfo.deadline) }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  recruitInfo: {
    type: Object,
    required: true
  }
});

// 格式化日期
const formatDate = (timestamp) => {
  if (!timestamp) return '无限期';
  const date = new Date(timestamp);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
};

// 获取岗位类型名称
const getTypeName = (type) => {
  const typeMap = {
    0: '全职',
    1: '兼职',
    2: '实习',
    3: '志愿者'
  };
  return typeMap[type] || '未知';
};
</script>

<style lang="scss" scoped>
.recruit-basic-info {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  
  &__header {
    display: flex;
    margin-bottom: 20px;
  }
  
  &__logo {
    width: 70px;
    height: 70px;
    border-radius: 14px;
    margin-right: 16px;
    background-color: #f5f5f5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }
  
  &__info {
    flex: 1;
  }
  
  &__name {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 6px;
    line-height: 1.4;
  }
  
  &__org {
    font-size: 15px;
    color: #666;
    margin-bottom: 10px;
    background-color: #f5f7fa;
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
  }
  
  &__tags {
    display: flex;
    flex-wrap: wrap;
  }
  
  &__tag {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 10px;
    margin-right: 8px;
    margin-bottom: 4px;
    font-weight: 500;
    
    &--type {
      background-color: #e6f7ff;
      color: #1890ff;
    }
    
    &--hot {
      background-color: #fff2e8;
      color: #fa541c;
    }
    
    &--recommend {
      background-color: #f6ffed;
      color: #52c41a;
    }
  }
  
  &__data {
    display: flex;
    justify-content: space-between;
    border-top: 1px dashed #f0f0f0;
    padding-top: 18px;
    background-color: #f9fafc;
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
  }
  
  &__data-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 10px;
  }
  
  &__data-label {
    font-size: 13px;
    color: #999;
    margin-bottom: 6px;
  }
  
  &__data-value {
    font-size: 18px;
    color: #333;
    font-weight: 600;
    
    &:nth-child(3) {
      color: #fa8c16;
    }
  }
}
</style>
